<template>
  <el-row style="height: 100%">
    <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6">
      <Header></Header>
    </el-row>
    <el-row style="height: 90%">
      <el-col :span="4" style="height: 100%;">
        <Navigator></Navigator>
      </el-col>
      <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
        <el-row>
          <h2>《销售者》操作页面</h2>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="3" :offset="1" style="text-align: center">
            <span style="font-size: 22px">
               订单编号:
            </span>
          </el-col>
          <el-col :span="6" >
            <el-input type="primary" v-model="order_no"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="showSearchDialog">搜索</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="showInputDialog">新增</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="22" :offset="1">
            <el-row style="margin-bottom: 10px">
              <el-col :span="2">
                <el-button type="primary" @click="queryOrder(0)">刷新</el-button>
              </el-col>
            </el-row>

            <el-table :data="tableData" border width="100%">
              <el-table-column prop="block_height" label="区块高度" width="100"></el-table-column>
              <el-table-column prop="block_time_stamp" label="时间戳" width="190"></el-table-column>
              <el-table-column prop="food_id" label="食品编号" width="100px"></el-table-column>
              <el-table-column prop="order_no" label="订单编号" width="100px"></el-table-column>
              <el-table-column prop="num" label="订单数量" width="100px"></el-table-column>
              <el-table-column prop="price" label="单价(元)" width="80px"></el-table-column>
              <el-table-column prop="tx_hash" label="交易哈希" width="550px"></el-table-column>
            </el-table>
            <el-pagination background layout="prev,pager,next" :page-size="10"
                           :total=total style="margin-top: 20px" @current-change="handleCurrentChange"></el-pagination>
          </el-col>
        </el-row>

        <el-dialog title="搜索订单详情页面" :visible.sync="searchDialogShow" width="70%" append-to-body>
          <el-form :model="searchSellOrder" label-width="150px" style="margin: 0 auto">
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单编号:">
                  {{searchSellOrder.order_no}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="食品编号:">
                  {{searchSellOrder.food_id}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单数量:">
                  {{searchSellOrder.num}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单单价(规格/元):">
                  {{searchSellOrder.price}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单用户地址:">
                  {{searchSellOrder.user_address}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单时间:">
                  {{searchSellOrder.update_time}}
                </el-form-item>
              </el-col>
            </el-row>






          </el-form>
          <el-row>
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane label="生产订单" name="1">
                <el-table :data="subTableData" border width="100%">
                  <el-table-column prop="block_height" label="区块高度" width="100"></el-table-column>
                  <el-table-column prop="block_time_stamp" label="时间戳" width="190"></el-table-column>
                  <el-table-column prop="food_id" label="食品编号" width="100px"></el-table-column>
                  <el-table-column prop="order_no" label="订单编号" width="100px"></el-table-column>
                  <el-table-column prop="prod_no" label="生产订单编号" width="120px"></el-table-column>
                  <el-table-column prop="order_type" label="订单类型" ></el-table-column>
                  <el-table-column prop="food_id" label="食品编号" ></el-table-column>
                  <el-table-column prop="price" label="单价(元)" ></el-table-column>
                  <el-table-column prop="num" label="订单数量" ></el-table-column>
                  <el-table-column prop="tx_hash" label="交易哈希" width="550px"></el-table-column>
                </el-table>
                <el-pagination background layout="prev,pager,next" :page-size="10"
                               :total=subTotal style="margin-top: 20px" @current-change="handleCurrentChange"></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="收购订单" name="2">
                <el-table :data="subTableData" border width="100%">
                  <el-table-column prop="block_height" label="区块高度" width="100"></el-table-column>
                  <el-table-column prop="block_time_stamp" label="时间戳" width="190"></el-table-column>
                  <el-table-column prop="food_id" label="食品编号" width="100px"></el-table-column>
                  <el-table-column prop="order_no" label="订单编号" width="100px"></el-table-column>
                  <el-table-column prop="buy_no" label="收购订单编号" width="120px"></el-table-column>
                  <el-table-column prop="order_type" label="订单类型" ></el-table-column>
                  <el-table-column prop="food_id" label="食品编号" ></el-table-column>
                  <el-table-column prop="price" label="单价(元)" ></el-table-column>
                  <el-table-column prop="num" label="订单数量" ></el-table-column>
                  <el-table-column prop="tx_hash" label="交易哈希" width="550px"></el-table-column>
                </el-table>
                <el-pagination background layout="prev,pager,next" :page-size="10"
                               :total=subTotal style="margin-top: 20px" @current-change="handleCurrentChange"></el-pagination>
              </el-tab-pane>
              <el-tab-pane label="运输订单" name="3">
                <el-table :data="subTableData" border width="100%">
                  <el-table-column prop="block_height" label="区块高度" width="100"></el-table-column>
                  <el-table-column prop="block_time_stamp" label="时间戳" width="190"></el-table-column>
                  <el-table-column prop="order_no" label="订单编号" width="100px"></el-table-column>
                  <el-table-column prop="transport_no" label="运输订单编号" width="120px"></el-table-column>
                  <el-table-column prop="order_type" label="订单类型" ></el-table-column>
                  <el-table-column prop="num" label="订单数量" ></el-table-column>
                  <el-table-column prop="from_place" label="运输起始地" width="100px"></el-table-column>
                  <el-table-column prop="to_place" label="运输目的地" width="100px"></el-table-column>
                  <el-table-column prop="tx_hash" label="交易哈希" width="600px"></el-table-column>
                </el-table>
                <el-pagination background layout="prev,pager,next" :page-size="10"
                               :total=subTotal style="margin-top: 20px" @current-change="handleCurrentChange"></el-pagination>
              </el-tab-pane>
            </el-tabs>
          </el-row>
        </el-dialog>
        <el-dialog title="添加订单页面" :visible.sync="inputDialogShow" append-to-body>
          <el-form :model="inputSellOrder" label-width="150px" style="width: 500px;margin: 0 auto">
            <el-form-item label="食品编号:">
              <el-input type="primary" v-model="inputSellOrder.food_id"></el-input>
            </el-form-item>
            <el-form-item label="订单数量:">
              <el-input type="primary" v-model="inputSellOrder.num"></el-input>
            </el-form-item>
            <el-form-item label="订单单价(规格/元):">
              <el-input type="primary" v-model="inputSellOrder.price"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="inputOrder">新增</el-button>
        </el-dialog>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import Header from "@/components/Header";
import Navigator from "@/components/Navigator";
export default {
  name: "production",
  data(){
    return{

      searchDialogShow : false,
      inputDialogShow : false,
      order_no:'',
      total:0,
      subTotal:0,
      activeTab:'1',


      searchSellOrder:{
        order_no:0,
        num:0,
        food_id:0,
        price:0,
        user_address:'',
        update_time:''
      },
      inputSellOrder: {
        num:0,
        food_id:0,
        price:0
      },
      tableData:[],
      subTableData: []
    }
  },
  components: {
    Header,
    Navigator
  },
  mounted(){
    this.queryOrder(0)
  },
  methods:{
    showSearchDialog() {
      this.searchDialogShow = true
      let postData = {
        order_no : this.order_no
      }
      this.axios.post('/get_order', postData, {
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.searchSellOrder = res.data.data
          console.log(this.searchSellOrder)
        }
      })
      this.queryOrder(0)
      this.querySubOrder(0)
    },
    showInputDialog() {
      this.inputDialogShow = true
    },
    inputOrder() {
      this.axios.post('/create_order', this.inputSellOrder,{
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          alert("新增数据成功!")
          this.inputDialogShow = false
          this.queryOrder()
        }
      })
    },
    queryOrder(page) {
      if (page == null){
        page = 0
      }
      let postData = {
        page:page
      }
      if (this.order_no != ''){
        postData.order_no = this.order_no
      }
      this.axios.post('/query_order', postData, {
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          console.log(this.tableData)
        }
      })
    },
    querySubOrder(page){
      if (page == null){
        page = 0
      }
      let postData = {
        page:page
      }
      if (this.order_no != ''){
        postData.order_no = this.order_no
      }
      let url = ''
      if (this.activeTab == '1') {
        url = '/query_production_order'
      }else if (this.activeTab == '2') {
        url = '/query_buy_order'
      }else if (this.activeTab == '3') {
        url = '/query_transport_order'
      }
      if (this.order_no != '') {
        let postData = {
          input_page:page,
          order_no : this.order_no
        }
        this.axios.post(url, postData, {
          headers: {
            'content-type':'application/json',
            'token':this.$cookies.get("token")
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.subTableData = res.data.data.list
            this.total = res.data.data.total
            console.log(this.tableData)
          }
        })
      }
    },
    handleTabClick() {
      this.querySubOrder(0)
    },
    handleCurrentChange(page) {
      this.queryOrder(page)
    }
  }
}
</script>

<style scoped>
.container{
  height: 100%;
  width: 100%;
  position: fixed;
}
.aside{
  background-color: #545c64;
}
.main{
  background-color: #fff;
}
.form{
  width: 400px;
  margin: 0 auto;
}
</style>